import { useStore } from "vuex";
import { computed, ref, watch } from "vue";
export default function useCD () {
  const cdRef = ref(null)
  const cdImgRef = ref(null)

  const store = useStore()
  const playing = computed(() => store.state.playing)
  const cdCls = computed(() => {
    return playing.value ? 'playing': ''
  })

  watch(playing, (newPlaying) => {
    if (!newPlaying) {
      syncTransform(cdRef.value, cdImgRef.value)
    }
  })
  function syncTransform (wrapper, inner) {
    // getComputedStyle 获取最终样式
    // style只获取内联样式
    const wrapperTransfrom = getComputedStyle(wrapper).transform
    const innerTransfrom = getComputedStyle(inner).transform
    wrapper.style.transform = wrapperTransfrom === 'none'? innerTransfrom: innerTransfrom.concat(' ', wrapperTransfrom)
  }

  function clearTransform () {
    cdRef.value.style.transform = ''
    cdImgRef.value.style.transform = ''
  }
  return {
    cdCls,
    cdRef,
    cdImgRef,
    clearTransform
  }
}